<template>
    <div>
        <div>
            <span class="fontStyle">开始时间 : </span>
            <el-date-picker
                    style="width: 130px;margin-right: 30px"
                    size="mini"
                    v-model="startTime"
                    value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="选择日期">
            </el-date-picker>
            <span class="fontStyle">结束时间 : </span>
            <el-date-picker
                    style="width: 130px;margin-right: 30px"
                    size="mini"
                    v-model="endTime"
                    value-format="yyyy-MM-dd"
                    type="date"
                    placeholder="选择日期">
            </el-date-picker>
            <el-button size="mini" type="primary" icon="el-icon-view" @click="searcchBtn01">查询医生排班</el-button>
            <el-button size="mini" type="primary" icon="el-icon-edit" @click="showDoctors">新增排班规则</el-button>
            <el-button size="mini" type="primary" icon="el-icon-view" @click="showRules">查询排班规则（生成排班计划）</el-button>
        </div>

        <div>
            <el-table
                    :data="tableData">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="scheddate"
                        label="日期">
                </el-table-column>
                <el-table-column
                        prop="department.deptname"
                        label="科室">
                </el-table-column>
                <el-table-column
                        prop="user.realname"
                        label="医生">
                </el-table-column>
                <el-table-column
                        prop="noon"
                        label="午别">
                </el-table-column>
                <el-table-column
                        prop="user.registLevel.registname"
                        label="挂号级别">
                </el-table-column>
                <el-table-column
                        prop="user.registLevel.registquota"
                        label="挂号限额">
                </el-table-column>
            </el-table>
        </div>
        <el-pagination
                background
                @current-change="changePage"
                :current-page="pageNumber"
                :page-size="pageSize"
                layout="prev, pager, next"
                :total="total">
        </el-pagination>

        <el-dialog
                @close="clearDialog"
                center
                title="新增排班规则"
                :visible.sync="dialogVisible1"
                width="80%">
            <div>
                <div style="text-align: center;margin-bottom: 10px">
                    <span>科室选择 : </span>
                    <el-select v-model="doctorParams.deptId" placeholder="科室" size="mini" class="selectStyle">
                        <el-option
                                v-for="item in deptList"
                                :key="item.id"
                                :label="item.deptname"
                                :value="item.id">
                        </el-option>
                    </el-select>

                    <span>挂号级别 : </span>
                    <el-select v-model="doctorParams.registLeId" placeholder="挂号级别" size="mini" class="selectStyle">
                        <el-option
                                v-for="item in registLevelList"
                                :key="item.id"
                                :label="item.registname"
                                :value="item.id">
                        </el-option>
                    </el-select>

                    <el-button type="primary" size="mini" @click="searchDoctorByDeptAndLevel">查询</el-button>

                    <el-button type="primary" size="mini" icon="el-icon-refresh" @click="clearDeptAndLevel">清空</el-button>
                </div>
                <div>
                    <el-table
                            :data="doctorList" border @selection-change="selectChange">
                        <el-table-column
                                type="selection"
                                width="35">
                        </el-table-column>
                        <el-table-column
                                prop="realname"
                                align="center"
                                label="医生名称">
                        </el-table-column>
                        <el-table-column
                                align="center"
                                width="90px"
                                label="周一 上午">
                            <template slot-scope="scope">
                                <el-checkbox v-model="scope.row.charm1"></el-checkbox>
                            </template>
                        </el-table-column>
                        <el-table-column
                                align="center"
                                width="90px"
                                label="周一 下午">
                            <template slot-scope="scope">
                                <el-checkbox v-model="scope.row.charm2"></el-checkbox>
                            </template>
                        </el-table-column>
                        <el-table-column
                                align="center"
                                width="90px"
                                label="周二 上午">
                            <template slot-scope="scope">
                                <el-checkbox v-model="scope.row.charm3"></el-checkbox>
                            </template>
                        </el-table-column>
                        <el-table-column
                                align="center"
                                width="90px"
                                label="周二 下午">
                            <template slot-scope="scope">
                                <el-checkbox v-model="scope.row.charm4"></el-checkbox>
                            </template>
                        </el-table-column>
                        <el-table-column
                                align="center"
                                width="90px"
                                label="周三 上午">
                            <template slot-scope="scope">
                                <el-checkbox v-model="scope.row.charm5"></el-checkbox>
                            </template>
                        </el-table-column>
                        <el-table-column
                                align="center"
                                width="90px"
                                label="周三 下午">
                            <template slot-scope="scope">
                                <el-checkbox v-model="scope.row.charm6"></el-checkbox>
                            </template>
                        </el-table-column>
                        <el-table-column
                                align="center"
                                width="90px"
                                label="周四 上午">
                            <template slot-scope="scope">
                                <el-checkbox v-model="scope.row.charm7"></el-checkbox>
                            </template>
                        </el-table-column>
                        <el-table-column
                                align="center"
                                width="90px"
                                label="周四 下午">
                            <template slot-scope="scope">
                                <el-checkbox v-model="scope.row.charm8"></el-checkbox>
                            </template>
                        </el-table-column>
                        <el-table-column
                                align="center"
                                width="90px"
                                label="周五 上午">
                            <template slot-scope="scope">
                                <el-checkbox v-model="scope.row.charm9"></el-checkbox>
                            </template>
                        </el-table-column>
                        <el-table-column
                                align="center"
                                width="90px"
                                label="周五 下午">
                            <template slot-scope="scope">
                                <el-checkbox v-model="scope.row.charm10"></el-checkbox>
                            </template>
                        </el-table-column>
                        <el-table-column
                                align="center"
                                width="90px"
                                label="周六 上午">
                            <template slot-scope="scope">
                                <el-checkbox v-model="scope.row.charm11"></el-checkbox>
                            </template>
                        </el-table-column>
                        <el-table-column
                                align="center"
                                width="90px"
                                label="周六 下午">
                            <template slot-scope="scope">
                                <el-checkbox v-model="scope.row.charm12"></el-checkbox>
                            </template>
                        </el-table-column>
                        <el-table-column
                                align="center"
                                width="90px"
                                label="周日 上午">
                            <template slot-scope="scope">
                                <el-checkbox v-model="scope.row.charm13"></el-checkbox>
                            </template>
                        </el-table-column>
                        <el-table-column
                                align="center"
                                width="90px"
                                label="周日 下午">
                            <template slot-scope="scope">
                                <el-checkbox v-model="scope.row.charm14"></el-checkbox>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

                <p style="text-align: center">
                    <el-pagination
                            @current-change="change1"
                            :current-page="pageNumber1"
                            v-show="total1 != 0"
                            :page-size="pageSize1"
                            background
                            layout="prev, pager, next"
                            :total="total1">
                    </el-pagination>
                </p>

                <div style="text-align: center;margin-top: 10px">
                    <span>规则名称 : </span>
                    <el-input ref="rulenameInput" v-model="schedulingData.ruleName" size="mini" style="width: 130px;margin-left: 10px;margin-top: 10px;"></el-input>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible1 = false" size="mini" type="warning">取 消</el-button>
                <el-button type="primary" @click="saveRules" size="mini" v-show="saveRuleBtn">保 存</el-button>
            </span>
        </el-dialog>

        <el-dialog
                @close="clearRuleList"
                center
                title="排班规则列表"
                :visible.sync="dialogVisible2"
                width="60%">
            <div>
                <div style="text-align: center">
                    <span>科室选择 : </span>
                    <el-select v-model="doctorParams.deptId" placeholder="科室" size="mini" class="selectStyle">
                        <el-option
                                v-for="item in deptList"
                                :key="item.id"
                                :label="item.deptname"
                                :value="item.id">
                        </el-option>
                    </el-select>
                    <el-button type="primary" size="mini" @click="searchRules">查询</el-button>

                    <el-button type="primary" size="mini" icon="el-icon-refresh">清空</el-button>
                </div>
                <div>
                    <el-table
                            @selection-change="selectChange2"
                            :data="ruleList">
                        <el-table-column
                                type="selection"
                                width="55">
                        </el-table-column>
                        <el-table-column
                                prop="rulename"
                                label="规则名称">
                        </el-table-column>
                        <el-table-column
                                prop="department.deptname"
                                label="科室名称">
                        </el-table-column>
                        <el-table-column
                                prop="user.realname"
                                label="医生姓名">
                        </el-table-column>
                        <el-table-column
                                prop="week"
                                label="排班规则">
                        </el-table-column>
                    </el-table>
                </div>
                <div style="text-align: center;margin-top: 10px">
                    <span>开始时间 : </span>
                    <el-date-picker
                            style="width: 130px;margin-right: 30px"
                            size="mini"
                            v-model="schePlan.startTime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="开始时间">
                    </el-date-picker>
                    <span>结束时间 : </span>
                    <el-date-picker
                            style="width: 130px;margin-right: 30px"
                            size="mini"
                            v-model="schePlan.endTime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="结束时间">
                    </el-date-picker>
                    <el-button size="mini" type="primary" :disabled="createScheduling" @click="createSchePlan">生成排班</el-button>
                </div>

            </div>
            <div slot="footer" style="text-align: center">
                <el-button size="mini" type="primary">关闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "Scheduling",
        data(){
            return{
                startTime:'',
                endTime:'',
                tableData:[],
                pageNumber:1,
                pageSize:10,
                total:0,
                dialogVisible1:false,
                dialogVisible2:false,
                saveRuleBtn:false,
                ruleList:[],
                doctorList:[],
                deptList:[],
                registLevelList:[],
                doctorParams:{
                    deptId:'',
                    registLeId:''
                },
                pageNumber1:1,
                pageSize1:4,
                total1:0,
                schedulingData:{
                    ruleName:'',
                    deptIds:[],
                    userIds:[],
                    weeks:[]
                },
                selections:[],
                selections2:[],
                createScheduling:true,
                schePlan:{
                    deptIds:[],
                    userIds:[],
                    ruleIds:[],
                    rules:[],
                    startTime:'',
                    endTime:''
                }
            }
        },
        methods:{
            createSchePlan(){
                this.selections2.forEach((item,i)=>{
                    this.schePlan.deptIds.push(item.department.id);
                    this.schePlan.userIds.push(item.user.id);
                    this.schePlan.ruleIds.push(item.id);
                    this.schePlan.rules.push(item.week);
                });
                this.$postRequest('/scheduling/createSchePlan',this.schePlan).then(resp=>{
                    if(resp){
                        this.ruleList=[];
                        this.schePlan.deptIds=[];
                        this.schePlan.userIds=[];
                        this.schePlan.ruleIds=[];
                        this.schePlan.rules=[];
                        this.schePlan.startTime='';
                        this.schePlan.endTime='';
                        this.doctorParams.deptId='';
                    }
                })
            },
            selectChange2(selection){
                this.selections2 = selection;
                if(this.selections2.length>0){
                    this.createScheduling = false;
                }else{
                    this.createScheduling = true;
                }
            },
            clearRuleList(){
                this.ruleList=[];
                this.doctorParams.deptId='';
            },
            searchRules(){
                let deptId = this.doctorParams.deptId == '' ? 0 : this.doctorParams.deptId;
                this.$getRequest('/rule/getRulesByDeptId?deptId='+deptId).then(resp=>{
                    if(resp){
                        this.ruleList = resp;
                    }
                })
            },
            showRules(){
                console.log("111")
                this.dialogVisible2 = true;
                this.initDepts();
            },
            initSchedulingList(){
                this.$getRequest('/scheduling/getSchedulingList?startTime='+this.startTime+'&endTime='+this.endTime+'&pageNumber='+this.pageNumber+'&pageSize='+this.pageSize).then(resp=>{
                    if(resp){
                        this.tableData = resp.list;
                        this.total=resp.total;
                    }
                })
            },
            changePage(pageNumber){
                this.pageNumber = pageNumber;
                this.initSchedulingList();
            },
            searcchBtn01(){
                this.pageNumber = 1;
                this.initSchedulingList();
            },
            showDoctors(){
                this.dialogVisible1 = true;
                this.initDepts();
                this.initRegistLevel();
            },
            initDepts(){
                this.$getRequest('/department/getDepartments').then(resp=>{
                    if(resp){
                        this.deptList = resp;
                    }
                })
            },
            initRegistLevel(){
                this.$getRequest('/registLevel/getRegistLevels').then(resp=>{
                    if(resp){
                        this.registLevelList = resp;
                    }
                })
            },
            searchDoctorByDeptAndLevel(){
                let deptId = this.doctorParams.deptId;
                let registLeId = this.doctorParams.registLeId;
                if(deptId=='' || deptId==null){
                    deptId = 0;
                }
                if(registLeId=='' || registLeId==null){
                    registLeId = 0;
                }
                this.$getRequest('/user/getUsersByDeptAndLevel?deptId='+deptId+'&registLeId='+registLeId+'&pageNumber='+this.pageNumber1+'&pageSize='+this.pageSize1).then(resp=>{
                    if(resp){
                        this.doctorList = resp.list;
                        this.total1 = resp.total;
                    }
                })
            },
            change1(pageNumber){
                this.pageNumber1 = pageNumber;
                this.searchDoctorByDeptAndLevel();
            },
            clearDeptAndLevel(){
                this.doctorParams.deptId='';
                this.doctorParams.registLeId=''
            },
            clearDialog(){
                this.doctorParams.deptId='';
                this.doctorParams.registLeId='',
                this.doctorList = [];
            },
            selectChange(selection){
                if(selection.length>0){
                    this.saveRuleBtn = true;
                }else{
                    this.saveRuleBtn = false;
                }
                this.selections = selection;
            },
            saveRules(){
                if(this.schedulingData.ruleName==null || this.schedulingData.ruleName=='' || this.schedulingData.ruleName=="null"){
                    this.$message.warning('请正确填写规则名称！');
                    this.$refs['rulenameInput'].focus();
                }else{
                    this.schedulingData.deptIds=[];
                    this.schedulingData.userIds=[];
                    this.schedulingData.weeks=[];
                    this.initRuleData();
                    this.$postRequest('/rule/addRules',this.schedulingData).then(resp=>{
                        if(resp){
                            this.doctorList=[];
                            this.registLevelList=[];
                            this.deptList=[];
                            this.selections=[];
                            this.schedulingData.deptIds=[];
                            this.schedulingData.userIds=[];
                            this.schedulingData.weeks=[];
                            this.schedulingData.ruleName='';
                        }
                    })
                }
            },
            initRuleData(){
                this.selections.forEach((item,i)=>{
                    this.schedulingData.deptIds.push(item.deptId);
                    this.schedulingData.userIds.push(item.id);
                    let week = '00000000000000';
                    for(let j=0;j<14;j++){
                        if(item['charm'+(j+1)]){
                            let prefix = week.substr(0,j);
                            let suffix = week.substr(j+1);
                            week = prefix+1+suffix;
                        }
                    }
                    this.schedulingData.weeks.push(week);
                })
            }
        },
        mounted() {
            this.initSchedulingList();
        }
    }
</script>

<style scoped>
 .fontStyle{
     font-size: 14px;
 }

    .selectStyle{
        width: 130px;
        margin-right: 10px;
    }
</style>